<template>
    <el-dialog v-model="isShow" title="文件下载" @close="closeDialog">
        <div style="line-height: 30px;">
            <div><span style="font-weight: 700;margin-right:10px;">下载素材: </span>{{ propData.houseName }}</div>
            <div>文件类型: {{ propData.fileName }}</div>
            <div>价格: {{ propData.price }}户币 (VIP专享价{{ propData.vipPrice }},可为您节省{{ propData.price - propData.vipPrice }}元)</div>
            <div class="btnSty" @click="submit">立即下载</div>
            <div style="width: 100%;text-align: center;color: #CB0018;margin-top: 20px;">温馨提示,已购买的资料15天内可免费重复下载</div>
        </div>
        <!-- <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="submit" type="primary">下载</el-button>
            </span>
        </template> -->
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { downHouseFileApi } from '@/api/index/index';
import { ElLoading, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter()

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
    propData: {
        type: Object,
        default: {}
    }
})
const emit = defineEmits(['close'])
const { isShow, propData } = toRefs(props)
const cancel = () => {
    emit('close')
}
const submit = () => {
    emit('close')
    const loading = ElLoading.service({
        lock: true,
        text: '下载中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    let params = {
        houseId: propData.value.houseId,
        houseFileId: propData.value.fileId
    }

    downHouseFileApi(params).then((res: any) => {
        console.log('下载返回数据:',res)
        let blob = new Blob([res], { type: `application/zip;` });
        // 获取heads中的filename文件名
        let downloadElement = document.createElement('a');
        // 创建下载的链接
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        // 下载后文件名
        // @ts-ignore
        downloadElement.download = propData.value.houseName + propData.value.fileName + '';
        document.body.appendChild(downloadElement);
        // 点击下载
        downloadElement.click();
        // 下载完成移除元素
        document.body.removeChild(downloadElement);
        // 释放掉blob对象
        window.URL.revokeObjectURL(href);
        loading.close()
    })
}
const closeDialog = () => {

}
</script>
<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
.btnSty{
    width: 20%;
    margin-left: 40%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    background-color: #CB0018;
    border-radius: 20px;
    font-size: 23px;
    margin-top: 50px;
    
}
</style>